HTML Links

HTML links (or hyperlinks) are essential for navigation on the web. They allow users to move between pages, sections, or external websites.

A basic HTML link is created using the <a> (anchor) tag.

<!DOCTYPE html>
<html>
<body>
<a href="https://example.com">Visit Example</a>
</body>
</html>

Explanation

<a>: Defines the hyperlink.

`href`: Specifies the URL.

Text between <a> and </a> is the clickable part of the link.

Absolute vs. Relative URLs

Absolute URL

An absolute URL includes the full web address

<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com">Google</a>
</body>
</html>

Relative URL

A relative URL links to another page within the same website

<!DOCTYPE html>
<html>
<body>
<a href="index.html">Home</a>
</body>
</html>

Opening Links in a New Tab

Use the `target="_blank"` attribute to open links in a new tab

<!DOCTYPE html>
<html>
<body>
<a href="https://example.com" target="_blank">Open in New Tab</a>
</body>
</html>

Security Note: Add `rel="noopener noreferrer"` for security when using `_blank`

Example

<!DOCTYPE html>
<html>
<body>
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure New Tab Link</a>
</body>
</html>

Linking to an Email Address

You can create a link to an email using `mailto:`

<!DOCTYPE html>
<html>
<body>
<a href="mailto:someone@example.com">Email Us</a>
</body>
</html>

Linking to a Phone Number

Use `tel:` to create a phone call link (useful for mobile users)

<!DOCTYPE html>
<html>
<body>
<a href="tel:+234567891011">Call Us</a>
</body>
</html>

Image as a Link

You can use an image instead of text as a link

<!DOCTYPE html>
<html>
<style>
a {
color: blue;
text-decoration: none;
}
a:hover {
color: red;
text-decoration: underline;
}
</style>
<body>
<a href="https://example.com">
<img src="Girlimage.jpg" alt="Example Image" width="100%" height="300">
</a>
</body>
</html>

Button as a Link

You can make a button act as a link

<!DOCTYPE html>
<html>
<body>
<button onclick="location.href='https://example.com'">Go to Example</button>
</body>
</html>

Best Practices

Always use descriptive link text (avoid "Click here").

Use `target="_blank"` carefully and add `rel="noopener noreferrer"` for security.

Ensure links are accessible (keyboard-friendly and screen-reader compatible).

*HTML Links*

HTML links (or hyperlinks) are essential for navigation on the web. They allow users to move between pages, sections, or external websites.

A basic HTML link is created using the <a> (anchor) tag.

Explanation

<a>: Defines the hyperlink. `href`: Specifies the URL. Text between <a> and </a> is the clickable part of the link.

Absolute vs. Relative URLs

Absolute URL

An absolute URL includes the full web address

Relative URL

A relative URL links to another page within the same website

Opening Links in a New Tab

Use the `target="_blank"` attribute to open links in a new tab

Security Note: Add `rel="noopener noreferrer"` for security when using `_blank`

Example

Linking to an Email Address

You can create a link to an email using `mailto:`

Linking to a Phone Number

Use `tel:` to create a phone call link (useful for mobile users)

Image as a Link

You can use an image instead of text as a link

Button as a Link

You can make a button act as a link

Best Practices

Always use descriptive link text (avoid "Click here"). Use `target="_blank"` carefully and add `rel="noopener noreferrer"` for security. Ensure links are accessible (keyboard-friendly and screen-reader compatible).

HTML Links

<a>: Defines the hyperlink.

`href`: Specifies the URL.

Text between <a> and </a> is the clickable part of the link.

Always use descriptive link text (avoid "Click here").

Use `target="_blank"` carefully and add `rel="noopener noreferrer"` for security.

Ensure links are accessible (keyboard-friendly and screen-reader compatible).